<template>
  <basic-container>
    <header>
      首页工作指引管理
    </header>
    <div class="container">
      <div>
        <el-table  :data="tableData">
          <el-table-column prop="date" width="250" label="流程指引对象">
            <template #default="scope">
              <img
                class="zydx-img"
                src="@/assets/images/business-system/work-manage-lczydx.png"
                alt=""
                srcset=""
              />{{ scope.row.date }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="流程指引步骤">
            <template #default="scope" >
              <div v-if="scope.row.name">
                <div class="zybz-container" v-for="item in scope.row.name"  :key="item.index">
                <img
                  class="zybz-img"
                  src="@/assets/images/business-system/work-manage-lczybz.png"
                  alt=""
                  srcset=""
                />{{ item }}
              </div>
              </div>
              <div v-else>
                <p class="empty-status">暂无流程配置</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" width="200" align="center" label="操作（编辑/是否展示）">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="editHandle(scope.row)">编辑</el-button>
              <el-button link type="primary" size="small" @click="handleClick">
                <el-switch v-model="scope.row.value1" />
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
          class="pagination-dom"
          v-model:current-page="currentPage2"
          v-model:page-size="pageSize2"
          :page-sizes="[100, 200, 300, 400]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </basic-container>
</template>
<script setup>
const tableData = ref([
  {
    date: '模拟指引对象1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '模拟指引对象2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '模拟指引对象3',
    name: ['tome', 'tome', 'tome', 'tome'],
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '模拟指引对象3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '模拟指引对象4',
    name: ['222', '333', '44', '55'],
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '模拟指引对象5',
    name: ['qq', '22211', 'sdda', 'fds'],
    address: 'No. 189, Grove St, Los Angeles',
  },
]);
const currentPage2 = ref(5);
const pageSize2 = ref(100);

// 编辑
const router = useRouter();
const editHandle = (v) => {
  console.log('v', v);
  router.push({ name: 'editPage', query: { v: JSON.stringify(v)  } });
};
// 分页事件
const handleSizeChange = () => {
  console.log(' items per page');
};
const handleCurrentChange = () => {
  console.log('current page:');
};
</script>

<style lang="scss" scoped>
header{
  background-color: #f0f2f5;
  font-size: 16px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #25292c;
  line-height: 42px;
  height: 50px;
}
:deep(.el-table th.el-table__cell){
      background: #f6f8fa!important;
      font-size: 14px;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: #25292C;
      line-height: 20px;
      height: 50px;
    }
.container{
  height: calc(100vh - 183px);
  .el-table{
    height: calc(100vh - 235px);
    .zydx-img{
      margin-right: 10px; width: 10px;
    }
    .zybz-img{
      margin-right: 10px; width: 15px; vertical-align: bottom
    }
    .empty-status{
      font-size: 14px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #989DA3;
      line-height: 20px;
    }
    .zybz-container{display:inline-block;background: #f9fafb; width: fit-content;
              padding: 5px 30px 5px 5px;margin:8px}
  }
}
.pagination-dom{
  float: right; margin: 10px
}
</style>
